(function(){
    function Snake(option = {}) {
    option = option
    this.width = option.width ||20
    this.height = option.height ||20
    this.body = [
        {x:3,y:2,color:"red"},
        {x:2,y:2,color:"blue"},
        {x:1,y:2,color:"blue"}
    ]
    this.direction = "right"
    this.element = []
    }
    var ps = "absolute"
    Snake.prototype.render = function(map) {
        for (i = 0,len = this.body.length;i<len;i++) {
            var piece = this.body[i]
            var ele = document.createElement("div")
            ele.style.width = this.width +"px"
            ele.style.height = this.height +"px"
            ele.style.left = piece.x * this.width +"px"
            ele.style.top = piece.y*this.height + "px"
            ele.style.position = ps
            ele.style.backgroundColor = piece.color
            map.appendChild(ele)
            this.element.push(ele)
        }
    }
    Snake.prototype.move = function () {
        for (i = this.body.length-1;i>0;i--) {
            this.body[i].x = this.body[i-1].x
            this.body[i].y = this.body[i-1].y
        }
        let head =this.body[0]
        switch(this.direction) {
            case "right":
                head.x += 1;
                break;
            case "left":
                head.x -= 1;
                break
            case "top":
                head.y -= 1;
                break;
            case "bottom":
                head.y += 1;
                break;
        }
    }
    Snake.prototype.remove = function () {
        for(i = this.element.length-1;i>=0;i--) {
            map.removeChild(this.element[i])
        }
        this.element= []
    }
    window.Snake = Snake;
})();

